<template>
    <win-op :showSetTop="false" :showMin="false" :showMax="false" :closeType="0"></win-op>
    <div class="winTop">
        <diV class="top-right drag"></diV>
    </div>
    <div class="login-container">
        <div class="login-box">
            <div class="drag">
                <div class="box-top w-100% flex  items-center color-#333 text-32px font-700">
                <img class="h-100px" src="@/assets/EPR.png" alt="">
                <div>海康摄像头视频分析和剪辑</div>
            </div>
            </div>
            <div class="form-content">
                <el-form
                    ref="formRef"
                    :model="state.formData"
                    :rules="state.rules"
                    hide-required-asterisk
                    label-position="top"
                >
                    <el-form-item prop="username">
                        <el-input placeholder="请输入登录ID或用户名"  v-model="state.formData.username" class="form-input"></el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input
                            placeholder="请输入密码"
                            v-model="state.formData.password"
                            class="form-input"
                            type="password"
                        ></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <div class="w-100%">
                <el-button
                    class="w-100% h-48px"
                    type="primary"
                    @click="login"
                    :loading="state.loading"
                >
                    登录
                </el-button>
            </div>
        </div>
    </div>
    
</template>

<script setup>
   import {  reactive, ref } from 'vue';
   import { useValidate } from '@/composables'
   import { useRouter } from 'vue-router'
   import { ElMessage  } from 'element-plus'
   import { BASE_REDIRECT_PATH } from '@/constants'
   import { useSystemStore } from '@/stores/system'
   import md5 from 'js-md5'

   const systemStore = useSystemStore()
   
   const router = useRouter()

   const formRef = ref(null)  

   const state = reactive({
    loading: false,
    formData: {
        username: '',
        password: ''
    },
    rules: {
        username: { required: true, message: '请输入用户名', tirgger: 'blur' },
        password: { required: true, message: '请输入密码', tirgger: 'blur' }
    }
   })

   const login = async ()=>{
      const valid = await useValidate(formRef)
      if (!valid) return
      try {
        state.loading = true
        const data = await window.ipcRenderer.invoke("onLoginSuccess",
        { username:state.formData.username, password: md5(state.formData.password) })

        if(data !== null){
            ElMessage.success('登录成功')
            systemStore.setUserInfo(data)
            router.push({ path: BASE_REDIRECT_PATH })
        } else {
            ElMessage.error('登录失败')
        }
        
    } catch (error) {
        defaultCatchError(error)
    } finally {
        state.loading = false
    }
   }
   
</script>



<style lang="scss" scoped>
.winTop {
    height: 25px;
    background-color: #ddd;
    .top-right  {
        height: 25px;
        width: 88%;
        float: left;
    }

}
.login-container {
    position: relative;
    overflow: hidden;
    padding: 20px;
    .login-box {
        background-color: rgba(255, 255, 255, 0.8);
        box-shadow: 0 0 5px rgba(255, 255, 255, 0.84);
        border-radius: 10px;
        display: flex;
        flex-direction: column;
        gap: 56px;
        z-index: 2;
        .header {
            display: flex;
            flex-direction: row-reverse;
        }
        
    }
    .form-content {
        .form-input {
            width: 100%;
            height: 48px;
            overflow: hidden;
            :deep() {
                .el-input__wrapper {
                    padding: 0;
                    border-radius: 4px;
                }
                .el-input__inner {
                    height: 100%;
                    padding: 0 16px;
                }
                .el-input__suffix {
                    width: 40px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
            }
        }
    }
}

</style>